<template>
  <main class="add-main">
    <div class="add-div">
      <p><span>添加用户</span><span @click="closeAddUsers">X</span></p>
      <div class="log-div">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item prop="username" label="用户名">
            <el-input
              v-model="ruleForm.username"
              type="text"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item prop="pass" label="密&emsp;码">
            <el-input
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item
            prop="email"
            label="邮 箱"
            :rules="[
              {
                required: true,
                message: '请输入邮箱地址',
                trigger: 'blur',
              },
              {
                type: 'email',
                message: '请输入正确的邮箱地址',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="ruleForm.email" />
          </el-form-item>

          <el-form-item
            label="手 机"
            prop="phone"
            :rules="[
              {
                required: true,
                message: '请输入手机',
              },
              {
                type: 'number',
                message: '手机必须是数字',
              },
            ]"
          >
            <el-input
              v-model.number="ruleForm.phone"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>

        <section>
          <el-button @click="closeAddUsers">取消</el-button>
          <el-button type="primary" @click="addPersons">添加</el-button>
        </section>
      </div>
    </div>
  </main>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref } from "vue";
// 接收参数
const emit = defineEmits(["aaa"]);

// 关闭遮罩层
function closeAddUsers() {
  emit("aaa", false);
}

const ruleFormRef = ref("");
const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass3 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入用户名"));
  } else {
    callback();
  }
};

// 获取账号和密码 获取邮箱
const ruleForm = reactive({
  pass: "",
  username: "",
  email: "",
  phone: "",
});

const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  username: [{ validator: validatePass3, trigger: "blur" }],
});

// 添加
function addPersons() {
  const headers = {
    Authorization: VueCookies.get("token"),
  };

  const data = {
    username: ruleForm.username,
    password: ruleForm.pass,
    email: ruleForm.email,
    mobile: ruleForm.phone,
  };

  axios.post("/api/users", data, { headers }).then((res) => {
    alert(res.data.meta.msg)
    if(res.data.meta.msg == '创建成功'){
      // 关闭遮罩层
      closeAddUsers()
    }
  });
}
</script>

<style scoped>
.add-main {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-div {
  width: 700px;
  height: 500px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
p {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0px 0px 40px;
}
.div-reg >>> .btn-div {
  width: 300px !important;
}
.div-reg >>> .el-form-item__content {
  margin: 0 !important;
}
/*  */
.log-div {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.log-div >>> .el-form-item__label {
  width: auto !important;
  line-height: 40px;
}
.log-div >>> .el-input__inner {
  width: 450px;
  height: 40px;
  position: relative;
}
.log-div >>> .el-input__suffix {
  position: absolute;
  right: 20px;
}
section {
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 80px;
}
.log-div >>> .el-input__wrapper {
  margin: 7px 0px;
}
</style>